<template>
  <!-- <div class="page-container" style="text-align: center;"> -->
  <div class="yx-bg">
    <div id="loading-panel" style="text-align: center;">
      <h1><strong>Loading...</strong></h1>
      <h2><strong>{{percent}}</strong></h2>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0,
      percent: '',
    }
  },
  mounted: function() {
    this.preload()
  },
  methods: {
    preload: function() {
      let imgs = [
        // '/static/img/bg.jpg',
        '/static/img/chengqiang.png',
        '/static/img/correct.png',
        '/static/img/denglong.png',
        '/static/img/error.png',
        '/static/img/home.png',
        '/static/img/meihua.png',
        '/static/img/mudan1.png',
        '/static/img/error.png',
        '/static/img/favicon.ico',
        '/static/img/nyx.png',
        '/static/img/mudan2.png',
        '/static/img/yuanxiao.png',
        '/static/img/xiangqi.png',
        '/static/img/wuyuan_logo.png',
        // '/static/img/ply.png',
        // '/static/img/q1.png',
        // '/static/img/q1a.png',
        // '/static/img/q1b.png',
        // '/static/img/q1c.png',
        // '/static/img/q1d.png',
        // '/static/img/q2.png',
        // '/static/img/q2a.png',
        // '/static/img/q2b.png',
        // '/static/img/q2c.png',
        // '/static/img/q2d.png',
        // '/static/img/q3.png',
        // '/static/img/q3a.png',
        // '/static/img/q3b.png',
        // '/static/img/q3c.png',
        // '/static/img/q3d.png',
        // '/static/img/q4.png',
        // '/static/img/q4a.png',
        // '/static/img/q4b.png',
        // '/static/img/q4c.png',
        // '/static/img/q4d.png',
        // '/static/img/q5.png',
        // '/static/img/q5a.png',
        // '/static/img/q5b.png',
        // '/static/img/q5c.png',
        // '/static/img/q5d.png',
        // '/static/img/q6.png',
        // '/static/img/q6a.png',
        // '/static/img/q6b.png',
        // '/static/img/q6c.png',
        // '/static/img/q6d.png',
        // '/static/img/q7.png',
        // '/static/img/q7a.png',
        // '/static/img/q7b.png',
        // '/static/img/q7c.png',
        // '/static/img/q7d.png',
        // '/static/img/q8.png',
        // '/static/img/q8a.png',
        // '/static/img/q8b.png',
        // '/static/img/q8c.png',
        // '/static/img/q8d.png',
        // '/static/img/restart.png',
        // '/static/img/share.png',
        // '/static/img/sharePanel.png',
        // '/static/img/start.png',
        // '/static/img/stop.png',
        // '/static/img/strong.png',
        // '/static/img/wang.png',

      ]

      for (let img of imgs) {
        let image = new Image()
        image.src = img
        image.onload = () => {
          this.count++
          let percentNum = Math.floor(this.count / 14 * 100)
          this.percent = `${percentNum}%`
        }
      }
    },

  },

  watch: {
    count: function(val) {
      // console.log(val)
      if (val == 14) {
        this.$router.push({path: 'cover'})
      }
    }
  }


}
</script>
